<template>
  <div class="h5Page">
    <div class="wrapper">
      <div class="guideCon">
        <div class="guideTitle">IOS用户安装指南</div>
        <div class="guideInfo">
          <p>1. 由于IOS9的安全机制，首次安装Qtglobal APP的用户需要进入系统“设置”；</p>
          <p>2. 选择“通用”——“描述文件”/“设备管理”；</p>
          <p>3. 选择“一个英文的公司名称.”，设置为信任；</p>
          <p>4. 点击“信任”完成验证；</p>
        </div>
      </div>
      <div class="btn-btc" @click="checksource(1)">
        <i class="iosIcon"></i>
        <span>下载IOS客户端</span>
      </div>
      <div class="btn-btc" @click="checksource(2)">
        <i class="androidIcon"></i>
        <span>下载安卓客户端</span>
      </div>
    </div>

    <div class="popwraper" v-show="isShowpop">

    </div>
  </div>
</template>
<script>
import "lib-flexible";
import { api } from "@/api/api";

export default {
  data() {
    return {
      androidDownloadUrl: "",
      iosDownloadUrl: "",
      DownloadUrl:"",
      isShowpop:false
    };
  },
  async created() {
     this.iosDownloadUrl = await this.getDownloadUrl(1);
     this.androidDownloadUrl = await this.getDownloadUrl(2);
  },
  methods: {
    checksource(num){
      let that = this;
      var ua = navigator.userAgent.toLowerCase();
      var isWeixin = ua.indexOf('micromessenger') != -1;
      if (isWeixin) {
          that.isShowpop = true;
      }else{
        if(num==1){
          window.location.href = that.iosDownloadUrl
        }else{
          window.location.href = that.androidDownloadUrl
        }
      }
    },
    async getDownloadUrl(platform) {
      let res = await api.getVersion(platform);
      let { code, data } = res.data;

      if (code == 0) {
        return data.downloadUrl;
      } else {
        return "";
      }
    },
    
  }
};
</script>

<style lang="less" scoped>
.h5Page {
  min-height: 100vh;
  // padding-top: 1.7067rem;
  box-sizing: border-box;
  .wrapper {
    min-height: 100vh;
    padding: 5.6267rem 0.72rem 0.6667rem;
    background: #4c38d8 url(../../assets/images/h5/bg.png) no-repeat top / 100%;
    box-sizing: border-box;
  }
  .popwraper{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:rgba(0,0,0,0.3);
    background-image: url(../../assets/images/popbg.png);
    background-repeat:no-repeat;
    background-position:top 20px right 40px;
    background-size:5.4rem;
  }
  .guideCon {
    position: relative;
    width: 8.56rem;
    height: 6.0533rem;
    background: url(../../assets/images/h5/panel.png) no-repeat center / 100%;
    margin: 0 auto;
    padding: 1.4333rem 0.24rem 0 0.64rem;
    box-sizing: border-box;
    .guideTitle {
      position: absolute;
      top: -0.4rem;
      left: 50%;
      transform: translateX(-50%);
      width: 4.72rem;
      height: 1.2533rem;
      background: url(../../assets/images/h5/titleBg.png) no-repeat center /
        100%;
      line-height: 1.2533rem;
      font-size: 0.4rem;
      font-familyA: PingFangSC-Medium;
      font-weight: 500;
      font-style: italic;
      color: #fff;
      text-shadow: 0px 2px 3px rgba(78, 62, 185, 0.48);
      text-align: center;
    }
    .guideInfo {
      p {
        font-size: 0.3733rem;
        word-spacing: 0;
        font-familyA: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(228, 224, 255, 1);
        line-height: 0.6667rem;
      }
    }
  }
  .btn-btc {
    display: block;
    height: 1.3333rem;
    margin: 0 auto;
    background: linear-gradient(
      0deg,
      rgba(108, 88, 255, 1),
      rgba(170, 157, 255, 1)
    );
    border-radius: 0.1333rem;
    margin-top: 0.44rem;
    text-align: center;
    cursor: pointer;
    i {
      display: inline-block;
      vertical-align: middle;
      margin-right: 0.2rem;
    }
    .iosIcon {
      width: 0.52rem;
      height: 0.6133rem;
      background: url(../../assets/images/h5/ios.png) no-repeat center / 100%;
    }
    .androidIcon {
      width: 0.5733rem;
      height: 0.6667rem;
      background: url(../../assets/images/h5/anzhuo.png) no-repeat center / 100%;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 0.4267rem;
      font-familyA: PingFangSC-Medium;
      font-weight: 500;
      color: #fff;
      text-shadow: 0px 2px 3px rgba(78, 62, 185, 0.48);
      line-height: 1.3333rem;
    }
  }
}
</style>